<template>
  <div class="detail">
    <el-form
      ref="postForm"
      :model="postForm"
      :rules="rules"
      label-position="right"
      label-width="130px"
    >
      <div class="form-data">
        <el-tabs type="border-card">
          <el-tab-pane label="订单基础信息">
            <el-form-item label="订单类型" prop="type">
              <el-tag>{{ typeValue }}</el-tag>
            </el-form-item>
            <el-form-item label="订单状态" prop="status">
              <el-select v-model="postForm.status" :disabled="true" placeholder="订单状态">
                <el-option
                  v-for="(order_status_item, order_status_index) in order_status"
                  :key="'order_status_'+order_status_index"
                  :label="order_status_item.label"
                  :value="order_status_item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="标题" prop="title">
              <el-input
                v-model="postForm.title"
                placeholder="标题"
                :disabled="true"
                style="width: 100%"
              />
            </el-form-item>
            <el-form-item label="订单金额" prop="amount">
              <el-input-number
                v-model="postForm.amount"
                placeholder="订单金额"
                :precision="2"
                :step="0.01"
                :disabled="true"
                style="width: 100%"
              />
            </el-form-item>
            <el-form-item label="退款金额" prop="refund_amount">
              <el-input-number
                v-model="postForm.refund_amount"
                placeholder="退款金额"
                :precision="2"
                :step="0.01"
                :disabled="true"
                style="width: 100%"
              />
            </el-form-item>
            <el-form-item label="运费" prop="freight">
              <el-input-number
                v-model="postForm.freight"
                placeholder="运费"
                :precision="2"
                :step="0.01"
                :disabled="true"
                style="width: 100%"
              />
            </el-form-item>
            <el-form-item label="订单编号" prop="order_no">
              <el-input
                v-model="postForm.order_no"
                placeholder="订单编号"
                :disabled="true"
                style="width: 100%"
              />
            </el-form-item>
            <el-form-item label="订单退款编号" prop="out_order_no">
              <el-input
                v-model="postForm.out_order_no"
                placeholder="订单退款编号"
                :disabled="true"
                style="width: 100%"
              />
            </el-form-item>
            <el-form-item label="预支付码" prop="prepay_id">
              <el-input
                v-model="postForm.prepay_id"
                placeholder="预支付码"
                :disabled="true"
                style="width: 100%"
              />
            </el-form-item>
            <el-form-item label="微信支付订单号" prop="transaction_id">
              <el-input
                v-model="postForm.transaction_id"
                placeholder="微信支付订单号"
                :disabled="true"
                style="width: 100%"
              />
            </el-form-item>
            <el-form-item label="用户申请退款的原因" prop="user_application_refund_reason">
              <el-input
                v-model="postForm.user_application_refund_reason"
                type="textarea"
                placeholder="用户申请退款的原因"
                :disabled="true"
                style="width: 100%"
              />
            </el-form-item>
            <el-form-item label="退款原因" prop="refund_desc">
              <el-input
                v-model="postForm.refund_desc"
                type="textarea"
                placeholder="退款原因"
                :disabled="true"
                style="width: 100%"
              />
            </el-form-item>
            <el-form-item label="订单备注" prop="notes">
              <el-input
                v-model="postForm.notes"
                type="textarea"
                placeholder="订单备注"
                style="width: 100%"
              />
            </el-form-item>
          </el-tab-pane>

          <el-tab-pane label="消息推送状态">
            <el-form-item label="下单成功消息" prop="allow_submit_success_subscribe">
              <it-switch
                v-model="postForm.allow_submit_success_subscribe"
                :active-value="1"
                :inactive-value="0"
                active-text="推送"
                inactive-text="关闭"
                :disabled="true"
              />
            </el-form-item>
            <el-form-item label="支付成功消息" prop="allow_pay_subscribe">
              <it-switch
                v-model="postForm.allow_pay_subscribe"
                :active-value="1"
                :inactive-value="0"
                active-text="推送"
                inactive-text="关闭"
                :disabled="true"
              />
            </el-form-item>
            <el-form-item label="支付超时消息" prop="allow_pay_timeout_subscribe">
              <it-switch
                v-model="postForm.allow_pay_timeout_subscribe"
                :active-value="1"
                :inactive-value="0"
                active-text="推送"
                inactive-text="关闭"
                :disabled="true"
              />
            </el-form-item>
            <el-form-item label="订单发货消息" prop="allow_delivery_subscribe">
              <it-switch
                v-model="postForm.allow_delivery_subscribe"
                :active-value="1"
                :inactive-value="0"
                active-text="推送"
                inactive-text="关闭"
                :disabled="true"
              />
            </el-form-item>
            <el-form-item label="退款通过消息" prop="allow_refund_subscribe">
              <it-switch
                v-model="postForm.allow_refund_subscribe"
                :active-value="1"
                :inactive-value="0"
                active-text="推送"
                inactive-text="关闭"
                :disabled="true"
              />
            </el-form-item>
          </el-tab-pane>

          <el-tab-pane label="订单状态时间">
            <el-form-item v-if="postForm.create_time != ''" label="创建时间" prop="create_time">
              <el-date-picker
                v-model="postForm.create_time"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="创建时间"
                :disabled="true"
              />
            </el-form-item>
            <el-form-item v-if="postForm.pay_time != ''" label="支付时间" prop="pay_time">
              <el-date-picker
                v-model="postForm.pay_time"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="支付时间"
                :disabled="true"
              />
            </el-form-item>
            <el-form-item v-if="postForm.delivery_time != ''" label="发货时间" prop="delivery_time">
              <el-date-picker
                v-model="postForm.delivery_time"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="发货时间"
                :disabled="true"
              />
            </el-form-item>
            <el-form-item v-if="postForm.user_application_refund_time != ''" label="用户发起退款时间" prop="user_application_refund_time">
              <el-date-picker
                v-model="postForm.user_application_refund_time"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="用户发起退款时间"
                :disabled="true"
              />
            </el-form-item>
            <el-form-item v-if="postForm.refund_create_time != ''" label="退款创建时间" prop="refund_create_time">
              <el-date-picker
                v-model="postForm.refund_create_time"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="退款创建时间"
                :disabled="true"
              />
            </el-form-item>
            <el-form-item v-if="postForm.order_end_time != ''" label="结束时间" prop="order_end_time">
              <el-date-picker
                v-model="postForm.order_end_time"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="结束时间"
                :disabled="true"
              />
            </el-form-item>
          </el-tab-pane>

          <el-tab-pane :disabled="!(orderProduct && orderProduct.length > 0)" label="订单商品数据">
            <el-table
              ref="orderViewProductTable"
              :key="'view_product'"
              :data="orderProduct"
              border
              fit
              highlight-current-row
              style="width: 100%"
            >
              <el-table-column
                label="ID"
                prop="specs_id"
                align="center"
                width="80"
              />
              <el-table-column label="商品图" width="80" align="center">
                <template slot-scope="{ row: { product_image: { prefix } }}">
                  <img
                    v-if="prefix === ''"
                    style="width: 50px"
                    src="@/assets/static/image/noImg.png"
                  >
                  <a v-else :href="prefix" target="_blank">
                    <img
                      :src="prefix"
                      style="width: 50px"
                    >
                  </a>
                </template>
              </el-table-column>
              <el-table-column
                label="商品标题"
                prop="product_title"
                align="center"
              />
              <el-table-column
                label="商品单价"
                prop="product_price"
                align="center"
                width="80"
              />
              <el-table-column
                label="购买数量"
                prop="product_count"
                align="center"
                width="80"
              />
              <el-table-column label="商品规格" align="center">
                <template slot-scope="{ row: { specs_id, specs_data }}">
                  <span
                    v-for="(product_specs_item, product_specs_index) in specs_data"
                    :key="specs_id + '_product_specs_' + product_specs_index"
                  >
                    {{ product_specs_index }}: <el-tag>{{ product_specs_item }}</el-tag>
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane :disabled="JSON.stringify(postForm.address) == '{}'" label="订单收货地址">
            <el-form-item label="收件人姓名" prop="address.user_name">
              <el-input
                v-model="postForm.address.user_name"
                placeholder="收件人姓名"
                style="width: 100%"
              />
            </el-form-item>
            <el-form-item label="收件人电话" prop="address.tel_number">
              <el-input
                v-model="postForm.address.tel_number"
                placeholder="收件人电话"
                style="width: 100%"
              />
            </el-form-item>
            <el-form-item label="收件人地址" prop="address">
              <el-input
                v-model="postForm.address.province_name"
                placeholder="省"
                style="width: 10%"
              />
              <el-input
                v-model="postForm.address.city_name"
                placeholder="市"
                style="width: 10%"
              />
              <el-input
                v-model="postForm.address.county_name"
                placeholder="区"
                style="width: 10%"
              />
              <el-input
                v-model="postForm.address.detail_info"
                placeholder="具体地址"
                style="width: 60%"
              />
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane :disabled="!showExpress" label="订单物流信息">
            <el-button
              type="primary"
              icon="el-icon-refresh"
              :disabled="orderExpress.express_status && [3,14].indexOf(orderExpress.express_status) !== -1"
              @click="refreshExpressData"
            >更新物流信息</el-button>
            <el-timeline class="express-timeline">
              <el-timeline-item
                v-for="(logistics_item, logistics_index) in orderExpress.logistics_information"
                :key="'express_logistics_' + logistics_index"
                :timestamp="logistics_item.ftime"
              >
                {{ logistics_item.context }}
              </el-timeline-item>
            </el-timeline>
          </el-tab-pane>
        </el-tabs>
      </div>

      <sticky :class-name="'sub-navbar'">
        <el-button
          v-loading="loading"
          type="success"
          style="margin-left: 10px"
          @click="submitForm"
        >
          提交
        </el-button>
      </sticky>
    </el-form>
  </div>
</template>

<script>
import Sticky from '@/components/Sticky'
import TnInnerTextSwitch from '@/components/TNInnerTextSwitch'
import { order_status } from '@/utils'
import { getOrderByID, refreshShopOrderExpress } from '@/api/order'

export default {
  name: 'OrderViewDetail',
  components: { Sticky, 'it-switch': TnInnerTextSwitch },
  props: {
    id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      loading: false,
      order_status: order_status,
      postForm: {
        id: 0,
        title: '',
        img_url: {},
        freight: 0.00,
        notes: '',
        order_no: '',
        out_order_no: '',
        prepay_id: '',
        transaction_id: '',
        amount: 0.00,
        user_application_refund_reason: '',
        refund_amount: 0.00,
        refund_desc: '',
        allow_submit_success_subscribe: 0,
        allow_pay_timeout_subscribe: 0,
        allow_pay_subscribe: 0,
        allow_delivery_subscribe: 0,
        allow_refund_subscribe: 0,
        type: 0,
        status: 0,
        pay_time: '',
        address: {},
        delivery_time: '',
        order_end_time: '',
        refund_create_time: '',
        user_application_refund_time: '',
        create_time: ''
      },
      orderProduct: [],
      orderExpress: {},
      rules: {
        amount: [
          { required: true, message: '付款金额不能为空' }
        ],
        refund_amount: [
          { required: true, message: '退款金额不能为空' },
          { type: 'number', message: '退款金额格式不正确' },
          { validator: this.validateRefundAmount, trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    typeValue() {
      switch (this.postForm.type) {
        case 1:
          return '赞赏'
        case 2:
          return '图鸟商店'
        default:
          return ''
      }
    },
    showExpress() {
      if ([2].indexOf(this.postForm.type) !== -1 && JSON.stringify(this.orderExpress) !== '{}') {
        return true
      }
      return false
    }
  },
  methods: {
    submitForm() {
      if (!this.loading) {
        this.loading = true
        this.$refs.postForm.validate((valid, fields) => {
          // console.log(valid, fields)

          // 判断规则是否验证通过
          if (valid) {
            // const refund = Object.assign({}, this.postForm)
            // refund.id = this.id

            // refundOrder(refund).then(response => {
            //   this.$notify({
            //     title: '成功',
            //     message: response.msg,
            //     type: 'success',
            //     duration: 2000
            //   })
            //   this.$emit('ended')
            // }).catch(() => {
            //   this.loading = false
            // })
          } else {
            this.loading = false
            for (const key in fields) {
              if (fields.hasOwnProperty(key)) {
                const element = fields[key]
                this.$message({
                  message: element[0].message,
                  type: 'error',
                  duration: 2000
                })
                return false
              }
            }
          }
        })
      }
    },
    getOrderByID() {
      if (this.id !== 0) {
        getOrderByID(this.id).then(response => {
          if (!response.data || response.data.length === 0) {
            return
          }

          const {
            id,
            title,
            img_url,
            freight,
            notes,
            order_no,
            out_order_no,
            prepay_id,
            transaction_id,
            amount,
            user_application_refund_reason,
            refund_amount,
            refund_desc,
            allow_submit_success_subscribe,
            allow_pay_timeout_subscribe,
            allow_pay_subscribe,
            allow_delivery_subscribe,
            allow_refund_subscribe,
            type,
            status,
            pay_time,
            delivery_time,
            order_end_time,
            refund_create_time,
            user_application_refund_time,
            create_time,
            product,
            address,
            express
          } = response.data
          this.postForm = {
            id: id,
            title: title || '',
            img_url: img_url || {},
            freight: freight || 0.00,
            notes: notes || '',
            order_no: order_no || '',
            out_order_no: out_order_no || '',
            prepay_id: prepay_id || '',
            transaction_id: transaction_id || '',
            amount: amount || 0.00,
            user_application_refund_reason: user_application_refund_reason || '',
            refund_amount: refund_amount || 0.00,
            refund_desc: refund_desc || '',
            allow_submit_success_subscribe: allow_submit_success_subscribe || 0,
            allow_pay_timeout_subscribe: allow_pay_timeout_subscribe || 0,
            allow_pay_subscribe: allow_pay_subscribe || 0,
            allow_delivery_subscribe: allow_delivery_subscribe || 0,
            allow_refund_subscribe: allow_refund_subscribe || 0,
            type: type || 0,
            status: status || 0,
            address: address || {},
            pay_time: pay_time || '',
            delivery_time: delivery_time || '',
            order_end_time: order_end_time || '',
            refund_create_time: refund_create_time || '',
            user_application_refund_time: user_application_refund_time || '',
            create_time: create_time || ''
          }

          this.orderProduct = product || []
          this.orderExpress = express || {}
        })
      }
    },
    refreshExpressData() {
      refreshShopOrderExpress({
        id: this.id
      }).then((response) => {
        const { data } = response
        console.log(data)
        this.orderExpress = data
      })
    },
    toDefault() {
      this.$refs.postForm.resetFields()
      this.loading = false
    },
    validateRefundAmount(rule, value, callback) {
      if (!value || value === '') {
        callback(new Error('退款金额不能为空'))
      } else if (this.postForm.amount < value) {
        callback(new Error('退款金额不能比支付金额大'))
      } else {
        callback()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.express-timeline {
  margin-top: 10px;
}
</style>
